{% macro article_box(article) %}
<div class="article-box center-box" id="article-{{article.id}}" article-id="{{article.id}}">
    <img src="/assets/img/bookmark-active.png" class="bookmark-active" />
    <a href="#" class="bookmark" rel="popover" title="Boards"> <img src="/assets/img/bookmark.png" /> </a>
    <div class="article-title">
        <img src="http://www.google.com/s2/favicons?domain={{ article.url|domain }}"/>
        <a href="{{ article.url }}"> <b>{{ article.title }}</b> </a>
    </div>

    <div style="clear: both;"></div>
    <p></p>
    <div class="article-thumb">
        {% for photo in article.photos %}
        {% if loop.first %}
        <img src="{{ article.photos[0] }}" class="article-img" />
        {% elif loop.index <= 4 %}
        <img src="{{ article.photos[loop.index] }}" class="hidden" />
        {% endif %}
        {% endfor %}
    </div>

    <p></p>
    <img src="http://lorempixel.com/40/40/people"/>
    <a href="/user/{{ article.author.id }}/"> <b>{{ article.author | username }}</b></a>
    <span> {{ article.first_note.note }}</span>
    <div style="clear: both;"></div>
    <p></p>
    <div class="stats">
        <div class="comment">
            <span id="stat-comments">{{ article.comments }}</span> <img src="/assets/img/chat.png" />
        </div>
        <div class="voteup">
            <span id="stat-vote-up">{{ article.vote_up }}</span> <img src="/assets/img/thumbs_up.png" />
        </div>
        <div class="votedown">
            <span id="stat-vote-down">{{ article.vote_down }}</span> <img src="/assets/img/thumbs_down.png" />
        </div>
    </div>
</div>
{% endmacro %} 